<template>
  <div>
    <!-- main -->
    <div class="main">
      <div class="main-search">
        <el-form class="layui-form search-single">
          <el-input v-model="listQuery.params.title" placeholder="请输入内容" @blur="search">
            <span slot="append" class="span_search" @click="search">搜索</span>
          </el-input>
        </el-form>
      </div>
      <div class="main-container1">
        <div class="container">
          <div class="location clearfix">
            <!-- 我是占位的，误删 -->
          </div>

          <div class="clearfix">
            <div class="fl main-nav main-nav-primary">
              <div class="title clearfix">
                <h3>{{ title }}</h3>
                <div class="value">共{{ listQuery.totalCount }}篇</div>
              </div>

              <div>
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
              </div>
            </div>
            <div class="fr main-content">
              <div class="tab-nav-primary">
                <div class="swiper-container">
                  <div class="swiper-wrapper">
                    <a href="javascript:;" class="swiper-slide item" :class="{'active':listQuery.params.sortType === 'create_time'}" @click="changeSort('create_time')">
                      <div class="inline-block">
                        <span class="name">最新</span>
                        <i class="iconfont" :class="[{'icon-desc': listQuery.params.asc?false:true},{'icon-asc': listQuery.params.asc}]" />
                      </div>
                    </a>
                  </div>
                </div>
                <div class="swiper-button-prev"><i class="iconfont icon-solidarrow-left" /></div>
                <div class="swiper-button-next"><i class="iconfont icon-solidarrow-right" /></div>
              </div>

              <!-- 列表-文档 -->
              <div class="list-document">
                <data-grid
                  :options="options"
                  :list-query="listQuery"
                >
                  <template slot="list-item" slot-scope="scope">

                    <div class="item">
                      <router-link :to="{ name: 'docView', params: { docId: scope.data.id }}">
                        <a href="" class="thumbnail">
                          <div class="content">
                            <el-image v-if="scope.data.cover!=null && scope.data.cover!=''" :src="scope.data.cover" fit="fill" style="height: 200px;width: 100%" />
                            <el-image v-else :src="require('@/assets/web/images/course_default.jpg')" fit="fill" style="height: 200px;width: 100%" />
                          </div>
                        </a>
                        <div class="price" />
                        <a href="" class="title">{{ scope.data.title }}</a>
                        <div class="operate clearfix">
                          <div class="inner-item"><i class="iconfont icon-vip" />{{ scope.data.docType_dictText }}</div>
                          <div class="inner-item">{{ scope.data.docFrom }}</div>
                          <div class="inner-item fr"><i class="iconfont icon-clock" />{{ scope.data.createTime }}</div>
                        </div>
                        <div class="summary">简介：{{ scope.data.remarks }}</div>
                        <div>
                          <button type="button" class="btn-share" data-type="article" data-id="3">详情<i class="iconfont icon-enter" /></button>
                        </div>
                      </router-link>
                    </div>
                  </template>
                </data-grid>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- main end -->

  </div>

</template>

<script>

import DataGrid from '@/components/DataGrid' // 权限判断函数
import { post } from '@/utils/request'
export default {
  name: 'IndexList',
  components: { DataGrid },
  props: {
  },
  data() {
    return {
      title: '全部文档',
      searchKey: '',
      listQuery: {
        current: 1,
        totalCount: '',
        size: 10,
        params: {
          title: '',
          sortType: 'create_time',
          asc: false,
          docType: ''
        }
      },
      options: {
        // 列表请求URL
        listUrl: '/api/doc/doc/webpaging'
      },

      data: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }

    }
  },

  created() {
    this.initDocType()
  },
  methods: {
    // 查询
    search() {
      this.$refs.pagingTable.getList()
    },
    changeSort(type) {
      if (this.listQuery.params.sortType != type) {
        this.listQuery.params.asc = false
      } else {
        if (this.listQuery.params.asc) {
          this.listQuery.params.asc = false
        } else {
          this.listQuery.params.asc = true
        }
      }
      this.listQuery.params.sortType = type
    },
    handleNodeClick(data) {
      this.listQuery.params.docType = data.id
      this.title = data.title
    },
    initDocType() {
      post('api/sys/dic/value/tree', { dicCode: 'document_type' })
        .then(res => {
          this.data = res.data
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}

</script>

<style >

.el-input-group__append, .el-input-group__prepend {
  background-color: #01CB94;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border-radius: 0px;
  padding: 0 20px;
  width: 1px;
  white-space: nowrap;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #01CB94;
  color: #fff;
}

.span_search{
  background-color: #01CB94;
  cursor:pointer;
  color: #fff;
}
</style>

